import React, { Component } from 'react';
import { setToken } from '../../utils/auth';
import { loginApi } from '../../services/auth';
import { Form, Input, Button, Layout, Space, message, Card } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import './index.css';
import img from '../../graghs/logo.png';

const { Footer } = Layout;
export default class Login extends Component {
	constructor(props) {
		super(props);
		this.state = {
			id: '',
			password: ''
		};
	}
	trylogin = () => {
		let loginInfo = {
			id: this.state.id,
			password: this.state.password
		};
		console.log(loginInfo);
		if ((loginInfo.id === '') | (loginInfo.password === '')) {
			message.error('员工编号和密码不能为空');
		} else {
			loginApi(loginInfo).then(
				(response) => {
					console.log(response.data);
					if (response.data.result === 'success') {
						message.success('登录成功');
						setToken(JSON.stringify(response.data.user));
						this.props.history.push({
							pathname: '/Home',
							state: { user_id: loginInfo.id }
						});
					} else {
						message.info('登录失败，请重新输入');
					}
				},
				(error) => {
					console.log('数据获取失败', error);
				}
			);
		}
	};

	// 当员工编号发生改变
	onInputChangeun(e) {
		let inputValue = e.target.value;
		this.setState({
			id: inputValue
		});
	}

	// 当密码发生改变
	onInputChangepw(e) {
		let inputValue = e.target.value;
		this.setState({
			password: inputValue
		});
	}

	render() {
		return (
			<div className="back">

				<Card  className="login-form"
					   headStyle={{ textAlign: 'center' }}
					   style={{ border: "none", background:"transparent"}}
				>

					<img src={img}  />


					<br/>
					<span className="title_1"> 客户端 </span>
					<br/>
					<br/>


					<Form>
						<Form.Item
							name="id"
							rules={[
								{
									required: true,
									message: '请输入员工编号!'
								}
							]}
						>
							<Input
								prefix={<UserOutlined className="site-form-item-icon" />}
								placeholder="用户名"
								onChange={(e) => this.onInputChangeun(e)}
							/>
						</Form.Item>
						<Form.Item
							name="password"
							rules={[
								{
									required: true,
									message: '请输入密码！'
								}
							]}
						>
							<Input
								prefix={<LockOutlined className="site-form-item-icon" />}
								type="password"
								placeholder="密码"
								onChange={(e) => this.onInputChangepw(e)}
							/>
						</Form.Item>
						<Form.Item
							wrapperCol={{
								offset: 8,
								span: 16
							}}
						>
							<br />
							<div id="btn">
								<Space size="large">
									<Button type="primary" onClick={this.trylogin}
											style={{borderRadius:"40px",marginTop:"80px",width:"160px",height:"45px"}}
									>		登录
									</Button>
									<Button htmlType="reset"
											style={{borderRadius:"40px",marginTop:"80px",width:"160px",height:"45px"}}
									>重置</Button>
								</Space>
							</div>
						</Form.Item>
					</Form>
				</Card>


				<Footer className="footer">2018级信管小学期作业设计 ©2021 Created by group 2</Footer>
			</div>
		);
	}
}
